<template>
    <div>
        <h1>添加会员</h1>
        <table class=" table">
            <tr>
                <td>会员账号</td>
                <td>
                    <input type="text" v-model="data.name" >
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" v-model="data.pass">
                </td>
            </tr>
            <tr>
                <td>门店名称</td>
                <td>
                    <input type="text" v-model="data.mname" >
                </td>
            </tr>
            <tr>
                <td>门店图片</td>
                <td>
                    <input type="file" @change="ulog">
                    <img :src='"https://localhost:7041"+data.img' style="width: 60px; height: 60px;">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="添加" class="btn btn-success" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const ulog=(e:any)=>{
 
    var a=e.target.files[0];
    var fd=new FormData();
    fd.append("file",a);
    if(a.size>1*1024*1024){
        alert('图片只能小于1m');
    }
    if(a.type!="image/jpeg" && a.type!="image/png" &&a.type != 'image/gif'){
        alert('格式只能为JPEG、PNG、GIF')
        return;
    }


    axios.post("https://localhost:7041/api/Upde/Uplode",fd).then(res=>{
     
        data.value.img=res.data;
    })
}

const data=ref({
    "id": 0,
  "name": "",
  "pass": "",
  "mname": "",
  "state": true,
  "isdep": true,
  "img": ""
})

const add=()=>{
    axios.post("https://localhost:7041/api/Men/DAdd",data.value).then(res=>{
        if(res.data>0){
            alert('添加成功');
        }
        else{
            alert('添加失败');
        }
    })
}
</script>

<style scoped>

</style>